<template>
  <div class="base-info">
    <div class="info">
      <el-image :src="url" fit="cover" />
      <div :class="{ 'pdf-preview': isCanPreview }" @click="pdfPreview" v-if="isCanPreview">
        点击预览
      </div>
      <div class="right-info">
        <el-row v-for="(array, i) in topInfo" :key="i">
          <el-col
            v-for="(el, j) in array"
            :key="j"
            :span="24 / array.length"
            style="display: inline-flex"
          >
            <span class="label">{{ el.label }}：</span>
            <el-button
              v-if="el.dataType.includes('TypeInstanceIdentifier')"
              type="primary"
              link
              @click="openOther(el)"
            >
              {{ el.displayValue }}
            </el-button>
            <span v-else class="value">{{ el.displayValue }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <BaseInfo :="attrs" :formList="formList"></BaseInfo>
  </div>
</template>

<script setup name="docDetailInfo">
import { useConvertForm } from '@/hooks';
import BaseInfo from '@/views/components/baseInfo.vue';

const attrs = useAttrs();
const route = useRoute();
const { commonApi } = window.$api;
const formList = ref([]);
const classifyList = ref([]);

const topInfo = ref([]);
onMounted(() => {
  getInfoLayout();
});
const getInfoLayout = () => {
  const params = {
    serviceKey: 'Default',
    oid: route.query.oid,
  };
  commonApi.getInfoLayout(params).then((res) => {
    if (res.data) {
      const currFormList = [];
      res.data.forEach((item) => {
        if (item.groupName === '常规') {
          const rows = Array.from(new Set(item.items.map((el) => el.row)));
          rows.forEach((row) => {
            const arr = item.items.filter((el) => el.row === row);
            topInfo.value.push(arr);
          });
        } else {
          currFormList.push(item);
        }
      });
      formList.value = useConvertForm(currFormList);
      const classification = computed(() => {
        const general = currFormList.find((item) => item.name === '常规');
        return general?.list?.flat().find((item) => item.name === 'Classification');
      });
      classification.value && getClassificationInfoLayout(classification?.value);
    }
  });
};
const openOther = (item) => window.open(item.value);
//el-image是否可点击预览
const url = ref(new URL('@/assets/images/part-detail.png', import.meta.url).href);
const isCanPreview = computed(() => {
  return route.query.model === 'file';
});
const getClassificationInfoLayout = (nodeInterName) => {
  const params = {
    serviceKey: 'Default',
    oid: route.query.oid,
    nodeInterName,
  };
  commonApi.getClassificationInfoLayout(params).then((res) => {
    if (res.data) {
      classifyList.value = useConvertForm(res.data);
    }
  });
};
</script>

<style lang="less" scoped>
.base-info {
  background-color: var(--el-fill-color-blank);
  height: 100%;
  overflow-y: auto;
  .info {
    display: flex;
    padding: 10px 0;
    position: relative;
    .pdf-preview {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      height: 180px;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      letter-spacing: 2px;
      cursor: pointer;
    }
    .el-image {
      width: 150px;
      height: 150px;
      margin-right: 20px;
      border-radius: 4px;
    }
    .right-info {
      display: flex;
      flex: auto;
      flex-direction: column;
      // justify-content: space-between;
    }
  }
}
</style>
